<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:ui="http://java.sun.com/jsf/facelets"
         xmlns:h="http://java.sun.com/jsf/html"
         xmlns:f="http://java.sun.com/jsf/core"
         xmlns:p="http://primefaces.org/ui">
    <h:head>
       <title> insert title here </title>
    </h:head>
    <h:body>
       <ui:composition template="/templates/khungchinhkhachhang.xhtml">
		<ui:define name="tieudetrang">
            Shopping Online
         </ui:define>
		<ui:define name="javascrip">
			<h:outputScript library="javascrip" name="muahang.js" />
		</ui:define>
		<ui:define name="phandau">
			<div class="daude">LapTop Online</div>
		</ui:define>
		<ui:define name="menungang">
			<p:tabMenu activeIndex="1">  
    		<p:menuitem value="Trang Chủ" url="muahang.xhtml" styleClass="menuitem" icon="ui-icon-home"/>  
    		<p:menuitem value="Giỏ Hàng" url="giohang.xhtml" styleClass="menuitem" icon="ui-icon-cart"/>
    		<p:menuitem value="Đăng Ký Thành Viên" url="#" styleClass="menuitem" icon="ui-icon-person"/>
    		<p:menuitem value="Trợ Giúp" url="#" styleClass="menuitem" icon="ui-icon-wrench"/>
			</p:tabMenu>
		</ui:define>
		<ui:define name="noidung">
		<h:form id="form">
		<div id="hoadon">
			<p:dataTable  value="#{beanBanHang.dataModel}" var="sanpham"
					rowKey="#{sanpham.ten}" paginator="true" rows="8"
					rowsPerPageTemplate="8,16,24"  
                selection="#{beanBanHang.selectedSanPhamGioHang}" selectionMode="single" 
                id="bangsanpham" styleClass="datatable">  
  
  <p:ajax event="rowSelect" update=":form:display" oncomplete="sanphamDialog.show()" >
  </p:ajax>
        <f:facet name="header">  
            <h:outputText value="Hóa Đơn Của Bạn"></h:outputText>  
        </f:facet>  
  
        <p:column headerText="Tên" filterBy="#{sanpham.ten}" sortBy="#{sanpham.ten}" id="tensanpham">  
            #{sanpham.ten}  
        </p:column>  
  
        <p:column headerText="Hãng" filterBy="#{sanpham.nhasanxuat.tennhasanxuat}" sortBy="#{sanpham.nhasanxuat.tennhasanxuat}" id="nhasanxuat">  
            #{sanpham.nhasanxuat.tennhasanxuat}  
        </p:column>  
  		
  		<p:column headerText="Số Lượng" filterBy="#{sanpham.soLuong}" sortBy="#{sanpham.soLuong}" id="soluong">  
            <p:inputText value="#{sanpham.soLuong}" rendered="#{beanBanHang.sanphamsua(sanpham)}" onkeypress="return digitonly(event)" maxlength="2">
            <p:ajax listener="#{beanBanHang.suasanpham()}" event="keyup" update="@form"></p:ajax>
            </p:inputText>
            <h:outputText value="#{sanpham.soLuong}" rendered="#{!beanBanHang.sanphamsua(sanpham)}"></h:outputText>
              
        </p:column>  
  		
        <p:column headerText="Thành Tiền" filterBy="#{beanBanHang.thanhtien(sanpham)}" sortBy="#{beanBanHang.thanhtien(sanpham)}">  
            <h:outputText value="#{beanBanHang.thanhtien(sanpham)}" id="thanhtien">
            <f:convertNumber pattern="###,###,### VND"></f:convertNumber>
            </h:outputText>
        </p:column>  
    	<p:column>  
            <h:commandLink rendered="#{!beanBanHang.sanphamsua(sanpham)}" styleClass="buttonkhachhang" action="#{beanBanHang.suasanpham()}">
                    <p:button  value="Sửa">
                    </p:button>
                    <f:setPropertyActionListener target="#{beanBanHang.selectedSua}" value="#{sanpham}"></f:setPropertyActionListener>
                    </h:commandLink>
                    
                    <h:commandLink action="#{beanBanHang.luusanpham}" rendered="#{beanBanHang.sanphamsua(sanpham)}" styleClass="buttonkhachhang">
                    <p:commandButton  value="Lưu"></p:commandButton>
                    <f:setPropertyActionListener target="#{beanBanHang.selectedSua}" value="#{sanpham}"></f:setPropertyActionListener>
                    </h:commandLink>
                    
                    <h:commandLink styleClass="buttonkhachhang" action="#{beanBanHang.xoasanpham}">
                    <p:commandButton value="Xóa"></p:commandButton>
                    <f:setPropertyActionListener target="#{beanBanHang.selectedSua}" value="#{sanpham}"></f:setPropertyActionListener>
                    </h:commandLink>
        </p:column>
    </p:dataTable>
    </div>
    <div id="footer">
                <h:outputText value="Tổng Tiền: "></h:outputText>
                <h:outputText id="tongtien" value="#{beanBanHang.tongsotien}" style="font-weight: bold;">
                <f:convertNumber pattern="###,###,### VND"></f:convertNumber>
                </h:outputText>
                <br />
                
               	<h:commandLink  action="thongtinkhachhang" disabled="#{empty beanBanHang.giohang}">
                <p:button value="Xác Nhận Thanh Toán" styleClass="buttongiohang" disabled="#{empty beanBanHang.giohang}"></p:button>
                </h:commandLink>
                
                <h:commandLink action="muahang">
                <p:button value="Quay Lại" styleClass="buttongiohang"></p:button>
                </h:commandLink>
                
    </div>
    <p:dialog header="Chi Tiết Sản Phẩm" widgetVar="sanphamDialog" resizable="false"  
              width="400" showEffect="explode" hideEffect="explode">
                
        <h:panelGrid id="display" columns="2" cellpadding="4" styleClass="tooltip">  
  
            <f:facet name="header">  
                <p:graphicImage value="/resources/images/hinhsanpham/#{beanBanHang.selectedSanPhamGioHang.hinh}"/>  
            </f:facet>  
            
  			<h:outputText value="Tên:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.ten}" id="ten"/>
            
            <h:outputText value="Giá:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.gia}" id="gia">
            <f:convertNumber pattern="###,###,### VND"></f:convertNumber>
            </h:outputText>  
  
            <h:outputText value="Hãng:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.nhasanxuat.tennhasanxuat}" id="hang"/>  
  
            <h:outputText value="Bảo Hành:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.baoHanh}" id="baohanh"/>
            
            <h:outputText value="CPU:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.cpu}" id="cpu"/>  
            
            <h:outputText value="Ram:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.ram}" id="ram"/>
            
            <h:outputText value="HDD:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.hdd}" id="hdd"/>
            
            <h:outputText value="Màn Hình:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.manHinh}" id="manhinh"/>
            
            <h:outputText value="Đồ Họa:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.doHoa}" id="dohoa"/>
            
            <h:outputText value="Ổ Đĩa:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.oDia}" id="odia"/>
            
            <h:outputText value="Wifi:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.wifi}" id="wifi"/>
            
            <h:outputText value="Webcam:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.webcam}" id="webcam"/>
            
            <h:outputText value="Pin:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.pin}" id="pin"/>
            
            <h:outputText value="Hệ Điều Hành:" style="font-weight: bold;"/>  
            <h:outputText value="#{beanBanHang.selectedSanPhamGioHang.hdh}" id="hdh"/>
            
            <h:outputText value="Khuyến Mãi: " style="font-weight: bold; color: red; "></h:outputText>
								<h:outputText escape="false" value="#{beanBanHang.selectedSanPhamGioHang.khuyenMai}"></h:outputText>
        </h:panelGrid>  
    </p:dialog> 
				</h:form>
		</ui:define>
	</ui:composition>
    
    </h:body>
 </html>